import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {

	state = { mouse: false } //标识鼠标移入、移出

	//鼠标移入、移出的回调 这里使用的是高阶函数因为在这里函数需要闭包否则会死循环
	handleMouse = (flag) => {
		return () => {
			this.setState({ mouse: flag })
		}
	}

	//勾选、取消勾选某一个todo的回调 
	handleCheck = (id) => {
		return (event) => {
			// 由于input改成了checkbox类型所以这里要把value变为checked
			// app首先给list传一个函数 list再把函数传递给item
			this.props.updateTodo(id, event.target.checked)
		}
	}

	//删除一个todo的回调 因为按钮内绑定了回调函数 并且传递了参数id所以这里不需要写高阶函数
	handleDelete = (id) => {
		if (window.confirm('确定删除吗？')) {
			this.props.deleteTodo(id)
		}
	}


	render() {
		const { id, name, done } = this.props
		const { mouse } = this.state
		return (
			// 鼠标移入变色方法以及按钮的出现和消失方法的悬浮效果
			<li style={{ backgroundColor: mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
				<label>
					{/* 这里需要使用checked */}
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
					<span>{name}</span>
				</label>
				{/* 这里是另外一种写法可以传递id的值 */}
				<button onClick={() => this.handleDelete(id)} className="btn btn-danger" style={{ display: mouse ? 'block' : 'none' }}>删除</button>
			</li>
		)
	}
}